<template>
  <div class="hello">
    <div class="index_nav" ref="nav">
      <img src="../assets/image/logos.png"/>
      <span>广东省新筛中心结果查询平台</span>
    </div>
    <div ref="hides">
      <div class="items" >
        <h4>*</h4>
        <span>患者姓名:</span>
        <input v-model="mother_name" autocomplete="off" placeholder="请输入患者姓名" />
      </div>
      <div class="items">
        <span>联系电话:</span>
        <input v-model="phone" autocomplete="off" placeholder="请输入联系电话" />
      </div>
      <div class="items">
        <span>采血卡号:</span>
        <input v-model="card_no" autocomplete="off" placeholder="请输入采血卡号" />
      </div>
      <div class="prompt">
        *联系电话 与 采血卡号 只需填入其中一项
      </div>
      <div class="btn">
        <button  :disabled="!mother_name || !phone && !card_no" @click="search">查询</button>
      </div>
      <div class="loading" v-if="loading">
       <vue-loading type="spiningDubbles" color="rgb(90, 193, 221)" :size="{ width: '40px', height: '40px' }" class="load"></vue-loading>
    </div>
    </div>
    <div class="list_box" ref="hide" else>
      <div class="list">
        <ul>
          <li v-for="(item, index) of list" :key="index">
            <div class="c1" ><img src="../assets/image/yiyuan.png" alt="1"/></div>
            <div class="c2" >
              <p class="content">
                <span class="n1">检测项目:</span>
                <span class="n2">{{item.check_type}}</span>
              </p>
              <p class="content">
                <span class="n1">送检单位:</span>
                <span class="n2">{{item.dep_name}}</span>
              </p>
              <p class="content">
                <span class="n1">标本状态:</span>
                <span class="n2">{{item.flage_str}}</span>
              </p>
            </div>
            <div class="c3" @click="detailList(item.card_no)" >
              <img src="../assets/image/youu.png" alt="2"/>
            </div>

          </li>
        </ul>
      </div>
    </div>
    <div v-show="goods" class="goods">暂无查询结果...</div>
    <div class="index_nav" ref="nav1" @click="backs" style="display:none">
        <img class="m1" ref="zuo" src="../assets/image/youu.png">
        <img class="m2" src="../assets/image/logos.png"/>
        <span>广东省新筛中心结果查询平台</span>
    </div>

    <v-detail :detail="details" v-if="show"></v-detail>

    <div class="foot">
      <!-- <p>里定健康网www.ldxxw.com.cn</p>
      <p>全国服务热线400-632-5588</p>
      <p>北京里定医疗网络科技服务有限公司</p>
      <p>法律声明ICP:黔ICP备15015604</p> -->
      <p>贵州里定医疗网络科技股份有限公司提供技术支持</p>
      <p>全国服务热线400-632-5588</p>
    </div>
  </div>
</template>

<script>
import {getData} from '../service/api'
import {isphone} from '../untils/utils'
import detail from './detail'
import { VueLoading } from 'vue-loading-template'
export default {
  data () {
    return {
      mother_name: '',
      phone: '',
      card_no: '',
      goods: false,
      list: [],
      details: [],
      show: false,
      loading: false
    }
  },
  created () {
    if (localStorage.account) this.phone = localStorage.account
    if (localStorage.name) this.mother_name = localStorage.name
    if (localStorage.card) this.card_no = localStorage.card
  },
  mounted () {
    this.$refs.zuo.style.transform = 'rotate(180deg)'
  },
  methods: {
    search () {
      this.loading = true

      if (!isphone(this.phone) && !this.card_no) {
        this.list = ''
        this.loading = false
        this.$message({
          message: '请输入正确的号码'
        })
      } else {
        getData(this.mother_name, this.card_no, this.phone).then(res => {
          if (res.success === false) {
            this.list = ''
            this.$message({
              message: res.errmsg
            })
            this.loading = false
            return
          }
          this.loading = false
          this.list = res.datas
          // console.log(this.list)
          localStorage.account = this.phone
          localStorage.name = this.mother_name
          localStorage.card = this.card_no

          if (!this.list) {
            // this.list = ''
            this.goods = true
          } else {
            // this.list = ''
            this.goods = false
          }
        })
      }
    },
    detailList (card_no) {
      this.list.forEach((item, index) => {
        // console.log('item', item)
        if (item.card_no === card_no) {
          this.details = item
          this.show = true
          this.$refs.hide.style.display = 'none'
          this.$refs.hides.style.display = 'none'
          this.$refs.nav.style.display = 'none'
          this.$refs.nav1.style.display = 'block'
        }
      })
    },
    backs () {
      this.show = false
      this.$refs.hide.style.display = 'block'
      this.$refs.hides.style.display = 'block'
      this.$refs.nav.style.display = 'block'
      this.$refs.nav1.style.display = 'none'
    }
  },
  components: {
    'v-detail': detail,
    'vue-loading': VueLoading
  }
}
</script>

<style scoped lang="less">

  @import '../assets/less/index.less';

</style>
